<template>
    <div class="store-wrap">
        <div class="main-wrap">
            <!--back-->
            <div class="nav-wrap cf">
                <ul class="fl nav-box shadow no-select">
                    <li @click="pageHref('/')">首页</li>
                </ul>
            </div>

            <!-- type -->
            <ul class="type-wrap">
                <li class="no-select" :class="'engine'==type.text ? 'active shadow' : ''" @click="typeChange('engine')">
                    <img class="type-img" src="/src/assets/imgs/icon-engine.svg" alt="引擎"/>
                    <div class="type-title">引擎</div>
                </li>
                <li class="no-select" :class="'bookmark'==type.text ? 'active shadow' : ''"
                    @click="typeChange('bookmark')">
                    <img class="type-img" src="/src/assets/imgs/icon-bookmark.svg" alt="书签"/>
                    <div class="type-title">书签</div>
                </li>
            </ul>

            <!-- 引擎/书签 -->
            <div class="padding-bottom">
                <!-- engine -->
                <div class="engine-wrap app-row app-col-space10" v-if="type.text=='engine'">
                    <div class="app-col-xs12 app-col-sm3">
                        <div class="engine-nav padding bg-white shadow-lg">
                            <div
                                    class="engine-items no-select"
                                    :class="engine.index == index ? 'active' : ''"
                                    v-for="(item, index) in engine.menu"
                                    @click="engineMenuChange(index)"
                            >
                                <img :src="item.icon || '/src/assets/imgs/icon-base.svg'" alt=""/>
                                <text class="text-elip">{{item.title}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="app-col-xs12 app-col-sm9">
                        <div class="engine-content">
                            <div class="app-row app-col-space10" v-if="engine.list.length">
                                <div class="app-col-md4 app-col-sm6 app-col-xs12" v-for="(item, index) in engine.list"
                                     :key="index">
                                    <div class="app-item shadow-lg">
                                        <div class="app-title text-elip">{{item.title}}</div>
                                        <div class="app-item-body">
                                            <span class="app-tag bg-black" v-if="item.artifact==1">神器</span>
                                            <div class="app-img shadow">
                                                <img :src="item.icon" alt=""/>
                                            </div>
                                            <div class="app-info">
                                                <div class="app-label text-elip">{{item.title}}</div>
                                                <div class="app-desc">{{item.desc}}</div>
                                                <div class="app-footer">

                                                    <!--<a-button
                                                            class="footer-btn"
                                                            type="link"
                                                            size="small"
                                                            shape="circle"
                                                            @click="openPage(item.url)"
                                                    >
                                                        <template #icon>
                                                            <ArrowLeftOutlined/>
                                                        </template>
                                                    </a-button>-->

                                                    <a-button
                                                            class="footer-btn"
                                                            type="primary"
                                                            size="small"
                                                            shape="circle"
                                                            @click="joinEngineOK(item.id)"
                                                    >
                                                        <template #icon>
                                                            <PlusOutlined/>
                                                        </template>
                                                    </a-button>

                                                    <a-button
                                                            class="footer-btn"
                                                            type="link"
                                                            size="small"
                                                            shape="circle"
                                                            @click="openPage(item.url)"
                                                    >
                                                        <template #icon>
                                                            <ArrowRightOutlined/>
                                                        </template>
                                                    </a-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                        class="app-col-md12 app-col-sm12 app-col-xs12 text-center"
                                        v-if="engine.count > engine.list.length"
                                >
                                    <a-button
                                            type="primary"
                                            :loading="engine.loading"
                                            @click="getEngineList(engine.page+1)"
                                    >加载更多
                                    </a-button>
                                </div>
                            </div>
                            <div class="no-data" v-else>暂无引擎</div>
                        </div>
                    </div>
                </div>
                <!-- bookmark -->
                <div class="bookmark-wrap app-row app-col-space10" v-if="type.text=='bookmark'">
                    <div class="app-col-xs12 app-col-sm3">
                        <div class="bookmark-nav padding bg-white shadow-lg">
                            <div
                                    class="bookmark-items no-select"
                                    :class="bookmark.index == index ? 'active' : ''"
                                    v-for="(item, index) in bookmark.menu"
                                    @click="bookmarkMenuChange(index)"
                            >
                                <img :src="item.icon || '/src/assets/imgs/icon-base.svg'" alt=""/>
                                <text class="text-elip">{{item.title}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="app-col-xs12 app-col-sm9">
                        <div class="bookmark-content">
                            <div class="app-row app-col-space10" v-if="bookmark.list.length">
                                <div class="app-col-md4 app-col-sm6 app-col-xs12" v-for="(item, index) in bookmark.list"
                                     :key="index">
                                    <div class="app-item shadow-lg">
                                        <div class="app-title text-elip">{{item.title}}</div>
                                        <div class="app-item-body">
                                            <span class="app-tag bg-black" v-if="item.artifact==1">神器</span>
                                            <div class="app-img shadow">
                                                <img :src="item.icon" alt=""/>
                                            </div>
                                            <div class="app-info">
                                                <div class="app-label text-elip">{{item.title}}</div>
                                                <div class="app-desc">{{item.desc}}</div>
                                                <div class="app-footer">
                                                    <a-button
                                                            class="footer-btn"
                                                            type="primary"
                                                            size="small"
                                                            shape="circle"
                                                            @click="openJoinBookmarkPanel(item.id, item.wid, item.title)"
                                                    >
                                                        <template #icon>
                                                            <PlusOutlined/>
                                                        </template>
                                                    </a-button>

                                                    <a-button
                                                            class="footer-btn"
                                                            type="link"
                                                            size="small"
                                                            shape="circle"
                                                            @click="openPage(item.url)"
                                                    >
                                                        <template #icon>
                                                            <ArrowRightOutlined/>
                                                        </template>
                                                    </a-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="app-col-md12 app-col-sm12 app-col-xs12 text-center"
                                     v-if="bookmark.count > bookmark.list.length">
                                    <a-button
                                            type="primary"
                                            :loading="bookmark.loading"
                                            @click="getBookmarkList(bookmark.page+1)"
                                    >加载更多
                                    </a-button>
                                </div>
                            </div>
                            <div class="no-data" v-else>暂无书签</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加至面板 -->
        <a-modal title="添加至面板" v-model:visible="joinBookmark.state" cancelText="取消" okText="添加" @ok="joinBookmarkOk">
            <a-form layout="vertical">
                <a-form-item label="选择分类">
                    <a-select v-model:value="menu.id" placeholder="请选择">
                        <a-select-option v-for="item in menu.list" :value="item.id">{{item.title}}</a-select-option>
                        <template #dropdownRender="{ menuNode: menu }">
                            <v-nodes :vnodes="menu"/>
                            <a-divider style="margin: 0"/>
                            <div
                                    style="padding: 4px 8px; cursor: pointer"
                                    @click="pageHref('/user/manage-bookmark')"
                            >
                                <plus-outlined/>
                                添加分类
                            </div>
                        </template>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {menu, joinEngine, joinBookmarkToMenu} from '/src/request/api/nav';
    import {engineMenu, engineList, bookmarkMenu, bookmarkList} from '/src/request/api/store';

    // iconfont
    import {createFromIconfontCN, PlusOutlined, ArrowRightOutlined, ArrowLeftOutlined} from '@ant-design/icons-vue';

    const IconFont = createFromIconfontCN({scriptUrl: website.iconfontUrl});

    import Nav from '/src/components/skin/default/Nav.vue';
    import website from "/src/config/website";
    import {goUrl, openPage, getQueryVariable} from "/src/util";

    export default {
        name: "store",
        components: {
            Nav,
            IconFont,
            PlusOutlined,
            ArrowLeftOutlined,
            ArrowRightOutlined,
            VNodes: (_, {attrs}) => {
                return attrs.vnodes;
            },
        },
        data() {
            return {
                store: useStore().state,

                type: {
                    text: 'engine',
                },
                engine: {
                    menu: [],
                    index: 0,

                    list: [],
                    count: 0,
                    page: 1,
                    limit: 15,
                    loading: false,
                },
                bookmark: {
                    menu: [],
                    index: 0,

                    list: [],
                    count: 0,
                    page: 1,
                    limit: 15,
                    loading: false,
                },
                // 用户分类
                menu: {
                    list: [],
                    id: null,
                },
                joinBookmark: {
                    state: false,
                    id: '',         // uwebid
                    wid: '',        // 书签id
                    title: ''       // 书签名称
                },
            }
        },
        created() {
            this.init();
        },
        mounted() {

        },
        methods: {
            // init
            init() {
                this.getEngineMenu();
                this.getBookmarkMenu();
                this.getUserMenu();
                // 分类
                let type = getQueryVariable('type');
                if (type == 'engine' || type == 'bookmark') {
                    this.type.text = type;
                }
            },
            // 页面切换
            pageHref(url) {
                goUrl(url);
            },
            // 前往
            openPage(url) {
                openPage(url, 'bookmark')
            },
            // 获取用户导航分类
            getUserMenu() {
                menu().then(res => {
                    let list = res.list;
                    this.menu.list = list;
                }).catch(err => {
                    console.log(err);
                })
            },
            // typeChange
            typeChange(text) {
                this.type.text = text;
            },
            // engine 列表
            getEngine() {
                let that = this;
                engine().then(res => {
                    let list = res.list;
                    that.engine.nav = list;
                    if (list.length) {
                        that.engine.list = list[0].engine;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 设置loading
            setEngineLoading(bool) {
                this.engine.loading = bool;
            },
            // engine 分类
            getEngineMenu() {
                let that = this;
                engineMenu().then(res => {
                    let list = res.list;
                    that.engine.menu = list;
                    if (list.length) {
                        that.getEngineList();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // engine 列表
            getEngineList(p, l) {
                let that = this,
                    index = that.engine.index,
                    info = that.engine.menu[index],
                    page = p || 1,
                    limit = l || that.engine.limit;
                that.setEngineLoading(true);

                engineList({
                    etid: info.id,
                    page: page,
                    limit: limit,
                }).then(res => {
                    let list = res.list,
                        count = parseInt(res.count || 0),
                        array = (page == 1) ? list : that.engine.list.concat(list);
                    that.setEngineLoading(false);
                    that.engine.page = page;
                    that.engine.count = count;
                    that.engine.list = array;
                }).catch(err => {
                    console.log(err);
                    this.setEngineLoading(false);
                })
            },
            // 引擎分类切换
            engineMenuChange(index) {
                let that = this;
                that.engine.index = index;
                that.getEngineList();
            },

            // bookmark 列表
            getBookmark() {
                let that = this;
                bookmark().then(res => {
                    let list = res.list;
                    that.bookmark.menu = list;
                    if (list.length) {
                        that.bookmark.list = list[0].bookmark;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 设置loading
            setBookmarkLoading(bool) {
                this.bookmark.loading = bool;
            },
            // bookmark 分类
            getBookmarkMenu() {
                let that = this;
                bookmarkMenu().then(res => {
                    let list = res.list;
                    that.bookmark.menu = list;
                    if (list.length) {
                        that.getBookmarkList();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // bookmark 列表
            getBookmarkList(p, l) {
                let that = this,
                    index = that.bookmark.index,
                    info = that.bookmark.menu[index],
                    page = p || 1,
                    limit = l || that.bookmark.limit;
                that.setBookmarkLoading(true);

                bookmarkList({
                    wtid: info.id,
                    page: page,
                    limit: limit,
                }).then(res => {
                    let list = res.list,
                        count = parseInt(res.count || 0),
                        array = (page == 1) ? list : that.bookmark.list.concat(list);
                    that.setBookmarkLoading(false);
                    that.bookmark.page = page;
                    that.bookmark.count = count;
                    that.bookmark.list = array;
                }).catch(err => {
                    console.log(err);
                    this.setBookmarkLoading(false);
                })
            },
            // 书签分类切换
            bookmarkMenuChange(index) {
                let that = this;
                that.bookmark.index = index;
                that.getBookmarkList();
            },

            // 引入引擎
            joinEngineOK(id) {
                let that = this,
                    token = that.store.token;
                // console.log('joinEngineOK', id);
                if (token) {
                    joinEngine({
                        id: id,
                    }).then(res => {
                        that.$message.success(res.msg || website.msg.success);
                    }).catch(err => {
                        that.$message.error(err.msg || website.msg.error);
                    })
                } else {
                    that.$message.warning('请先登录');
                }
            },

            // 打开添加书签面板
            openJoinBookmarkPanel(id, wid, title) {
                let that = this,
                    token = that.store.token;
                if (token) {
                    that.joinBookmark.id = id;
                    that.joinBookmark.wid = wid;
                    that.joinBookmark.title = title;
                    that.joinBookmark.state = true;
                } else {
                    that.$message.warning('请先登录');
                }
            },
            // 引入书签
            joinBookmarkOk() {
                let that = this,
                    token = that.store.token,
                    id = that.joinBookmark.id,
                    wid = that.joinBookmark.wid,
                    title = that.joinBookmark.title,
                    mid = that.menu.id;

                // console.log(mid, wid, title);
                if (!mid) {
                    that.$message.warning('请选择分类');
                    return false;
                }
                if (token) {
                    joinBookmarkToMenu({
                        id: id,
                        mid: mid,
                    }).then(res => {
                        that.$message.success(res.msg || website.msg.success);
                        that.joinBookmark.state = false;
                    }).catch(err => {
                        that.$message.error(err.msg || website.msg.error);
                    })
                } else {
                    that.$message.warning('请先登录');
                }
            },

            // 收藏
            join(id) {
                // console.log('join', id);
            },
            // 喜欢
            like(id) {
                // console.log('like', id);
            },
        }
    }
</script>

<style lang="less" scoped>
    @width: 1000px;
    @height: 20px;
    @radius: 14px;
    @active: #000;

    .store-wrap {
        width: 100vw;
        min-height: 100vh;

        .main-wrap {
            width: @width;
            margin: 0 auto;

            .nav-wrap {
                padding-top: 20px;

                .nav-box {
                    border-radius: 100px;
                    padding: 0 10px;
                    font-size: 0;
                    min-width: 60px;
                    background-color: white;

                    li {
                        display: inline-block;
                        font-size: 14px;
                        min-width: 40px;
                        height: 20px;
                        line-height: 20px;
                        margin: 8px 0;
                        padding: 0 10px;
                        text-align: center;
                        cursor: pointer;
                        /*border-right: 1px solid #d3d3d3;*/
                        position: relative;
                        color: #333;

                        &:hover, &.active {
                            color: @active;
                        }

                        &:after {
                            content: '';
                            border: 1px solid #d3d3d3;
                            position: absolute;
                            right: 0;
                            top: 5px;
                            height: 10px;

                        }

                        &:last-child:after {
                            content: none;
                        }
                    }
                }
            }

            .type-wrap {
                padding: 10px 0 0 0;
                margin: 0;
                text-align: center;

                li {
                    display: inline-block;
                    margin-bottom: 10px;
                    width: 80px;
                    height: 80px;
                    padding: 10px;
                    border-radius: @radius;
                    cursor: pointer;
                    margin-right: 10px;

                    &.active {
                        background: white;

                        .type-title {
                            color: #1E9FFF;
                        }
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    .type-img {
                        width: 40px;
                        height: 40px;
                    }

                    .type-title {
                        height: 15px;
                        line-height: 15px;
                        margin-top: 5px;
                    }
                }
            }

            .engine-wrap {
                .engine-nav {
                    padding: 20px;
                    border-radius: @radius;

                    .engine-items {
                        cursor: pointer;
                        padding: 10px;
                        display: flex;
                        align-items: center;
                        transition: all .5s;

                        img {
                            width: @height;
                            height: @height;
                            margin-right: 10px;
                        }

                        text {
                            flex: 1;
                        }

                        &.active {
                            background-color: #efefef;
                            border-radius: @radius;
                            /*border-right: 2px solid @active;*/
                        }
                    }
                }

                .engine-content {

                }
            }

            .bookmark-wrap {
                .bookmark-nav {
                    padding: 20px;
                    border-radius: @radius;

                    .bookmark-items {
                        cursor: pointer;
                        padding: 10px;
                        display: flex;
                        align-items: center;
                        transition: all .5s;

                        img {
                            width: @height;
                            height: @height;
                            margin-right: 10px;
                        }

                        text {
                            flex: 1;
                        }

                        &.active {
                            background-color: #efefef;
                            border-radius: @radius;
                            /*border-right: 2px solid @active;*/
                        }
                    }
                }

                .bookmark-content {

                }
            }

            .app-item {
                height: 200px;
                padding: 10px;
                border-radius: @radius;
                background-color: white;
                transition: all 0.3s ease;
                overflow: hidden;
                text-align: center;
                position: relative;

                .app-title {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    padding: 20px;
                    color: #f0f0f0;
                    z-index: 1;
                    transition: all 0.3s ease;
                }

                .app-item-body {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 10;

                    .app-tag {
                        border-radius: @radius;
                        padding: 2px 5px;
                        font-size: 12px;
                        position: absolute;
                        top: 15px;
                        left: 15px;
                    }

                    .app-img {
                        display: inline-block;
                        width: 50px;
                        height: 50px;
                        padding: 10px;
                        margin-top: 30px;
                        border-radius: @radius;
                        transform: translateY(0px);
                        -webkit-transform: translateY(0px);
                        -moz-transform: translateY(0px);
                        -webkit-transition: all 0.3s ease;
                        -moz-transition: all 0.3s ease;
                        -o-transition: all 0.3s ease;
                        z-index: 10;

                        img {
                            position: relative;
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            border-radius: @radius;
                            /*background-color: white;*/

                            &:after {
                                content: '';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                z-index: 2;
                                top: 0;
                                left: 0;
                                background: url('/src/assets/imgs/network.png') white;
                                background-size: 100%;
                            }
                        }
                    }

                    .app-info {
                        position: absolute;
                        bottom: -34px;
                        left: 0;
                        width: 100%;
                        padding: 10px;
                        transition: all 0.3s ease;

                        .app-label {
                            color: black;
                            font-size: 14px;
                            height: @height;
                            line-height: @height;
                        }

                        .app-desc {
                            margin-top: 4px;
                            color: #717171;
                            font-size: 12px;
                            height: 40px;
                            line-height: 20px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            transition: all .3s ease;
                        }

                        .app-footer {
                            height: 24px;
                            margin-top: 10px;

                            .footer-btn {
                                margin-right: 5px;

                                &:last-child {
                                    margin-right: 0;
                                }
                            }

                            /*.btn-add {
                                position: absolute;
                                top: 15px;
                                right: 15px;
                                display: none;
                            }*/
                        }
                    }
                }

                &:hover {

                    .app-title {
                        color: #fbfbfb;
                        transform: translateY(-4px);
                        -webkit-transform: translateY(-4px);
                        -moz-transform: translateY(-4px);
                    }

                    .app-img {
                        transform: translateY(-16px);
                        -webkit-transform: translateY(-16px);
                        -moz-transform: translateY(-16px);
                    }

                    .app-info {
                        bottom: 0;

                        .app-desc {
                            color: #000;
                            height: 60px;
                            -webkit-line-clamp: 3;
                        }
                    }

                }
            }

        }
    }

    @media screen and (max-width: @width + 40) {
        .store-wrap .main-wrap {
            width: auto;
            overflow: hidden;
            margin: 0;
            padding: 0 20px 20px 20px;
        }
    }
</style>
